<template>
  <!--按设备查询进出记录-->
  <div class="components-layout-demo">
    <a-layout style="height:100%">
      <a-layout style="background: #fff;height:100%">
        <a-layout-sider class="layout-sider-left">
          <div style="height:100%;">
            <sidebar-check-device
              :placeTree="placeTree"
              :placeChecked.sync="placeCheckedLeft"
              :stDeviceCheck.sync="stDeviceCheckLeft"
              :stDeviceBhChecked.sync="stDeviceBhCheckedLeft"
              @on-check="serchByChecked"
              @on-select="serchByselected"
              :heightTree="heightTreeLeft"
              :heightTable="heightTableLeft"
              :setHeight="'13px'"
            />
          </div>
        </a-layout-sider>
        <a-layout-content class="layoutContent">
          <div class="components-table-demo-size" style="height:100%">
            <!-- tools盒子 每个页面必须存在的div盒子，除了表格以外的功能都放在这个里面 -->
            <div id="tools">
              <div class="height8"></div>

              <a-form layout="inline" style="text-align: left;padding: 0 10px;" :selfUpdate="true">
                <a-form-item label="开始日期" class="marginBtm">
                  <a-date-picker
                    :disabledDate="disabledStartDate"
                    format="YYYY-MM-DD"
                    v-model="startDate"
                    placeholder="开始日期"
                    style="width: 150px;"
                    @openChange="handleStartOpenChange"
                  />
                </a-form-item>
                <a-form-item label="结束日期" class="marginBtm">
                  <a-date-picker
                    :disabledDate="disabledEndDate"
                    format="YYYY-MM-DD"
                    placeholder="结束日期"
                    v-model="endDate"
                    :open="endOpen"
                    style="width: 150px;"
                    @openChange="handleEndOpenChange"
                  />
                </a-form-item>
                <a-form-item label="类型" class="marginBtm">
                  <a-select
                    showArrow
                    mode="multiple"
                    placeholder="请选择记录类型"
                    :maxTagCount ="number"
                    style="width: 200px;"
                    @change="handleChange"
                    @popupScroll="popupScroll"
                  >
                    <a-select-option
                      v-for="bdRecordType in bdRecordTypeList"
                      :key="bdRecordType.recordType"
                    >{{bdRecordType.recordTypeName}}</a-select-option>
                  </a-select>
                </a-form-item>

                <a-form-item class="marginBtm">
                  <a-button type="primary" @click="handleQuery">
                    查询
                  </a-button>
                </a-form-item>
              </a-form>

              <a-divider style="margin: 5px 0"/>

              <!-- 功能按钮 -->
              <div class="divPadiAlign">
                <a-button type="primary" class="button-marin" @click="handleExport">
                  导出
                </a-button>
              </div>


            </div>
            <!-- 右侧数据表格 -->
            <div style="padding:0 10px" id="tableBox">
              <a-table
                bordered
                class="a-table"
                size="small"
                :columns="columnsRight"
                :dataSource="listRight"
                :loading="tableLoading"
                :rowKey="(record) => record.xh"
                :pagination="paginationRight"
                :scroll="{ y: yHeight,x:xWidth}"
              />
              <!--:customRow="clickRow"   双击行查看图片事件-->
            </div>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <!--导出加载中-->
    <customLoading :customVisible="spinning"></customLoading>
    <!--查看人脸照片-->
    <viewFace ref="visibleImg" :lookImg="lookImg"></viewFace>
  </div>
</template>

<script>
  import sidebarCheckDevice from "@/components/accessControlSystem/sidebarCheckDevice.vue";
  import sidebarCheckUser from "@/components/accessControlSystem/sidebarCheckUser.vue";
  import viewFace from "@/components/accessControlSystem/viewFace.vue";
  import { tableBoxHeight } from "@/api/communal";
  import dept from "@/api/accessControlSystem/dept";
  import place from "@/api/accessControlSystem/place";
  import standardReports from "@/api/accessControlSystem/standardReports";

  import moment from "moment";
  import api from "@/config/config";

  export default {
    components: {
      sidebarCheckDevice,
      sidebarCheckUser,
      viewFace
    },

    data() {
      let _this = this;
      return {
        spinning: false,
        number: 1,
        startDate: moment().startOf('month'), //开始日期 条件
        endDate: moment().endOf('month').endOf('month'), //结束日期 条件
        jlType: [], //记录类型 条件
        instDeviceRuleNo: 1,
        outstDeviceRuleNo: 1,
        bdRecordTypeList: [
          {recordType:1,recordTypeName:"刷卡开门" },
          {recordType:2,recordTypeName:"刷卡+密码开门" },
          {recordType:3,recordTypeName:"刷卡等待密码" },
        ], //所有记录类型

        lookImg: "",  //照片地址

        //树形结构
        deptTree: [],
        placeTree: [],

        /* 左侧 */
        heightTreeLeft: "",
        heightTableLeft: "500",
        placeCheckedLeft: [],
        placeselectedLeft: [],
        stDeviceCheckLeft: [],
        stDeviceBhCheckedLeft: [],

        /* 右侧  */
        yHeight: 500,
        xWidth:1200,
        pageNoRight: 1,
        pageSizeRight: 10,
        searchNameRight: "",
        tableLoading: false,
        listRight:  [
          // {"ip":"规则1","userName":"郭永超","xh":"0010021",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达东门","smtDeptname":"信息系统部","userCard":"723896960","id":3938,"userNo":"8811157","jlType":1,"depName":"默认场所","mc":"规则1","userLx":1},
          // {"ip":"规则1","userName":"郭永超","xh":"0010022",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达西门","smtDeptname":"信息系统部","userCard":"723896960","id":3941,"userNo":"8811157","jlType":4,"depName":"默认场所","mc":"规则1","userLx":2},
          // {"ip":"规则1","userName":"郭永超","xh":"0010023",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达南门","smtDeptname":"信息系统部","userCard":"723896960","id":3940,"userNo":"8811157","jlType":2,"depName":"默认场所","mc":"规则1","userLx":3},
          // {"ip":"规则1","userName":"郭永超","xh":"0010024",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
          // {"ip":"规则1","userName":"郭永超","xh":"0010025",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
          // {"ip":"规则1","userName":"郭永超","xh":"0010026",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
          // {"ip":"规则1","userName":"郭永超","xh":"0010027",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
          // {"ip":"规则1","userName":"郭永超","xh":"0010028",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
          // {"ip":"规则1","userName":"郭永超","xh":"0010031",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
          // {"ip":"规则1","userName":"郭永超","xh":"0010032",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
          // {"ip":"规则1","userName":"郭永超","xh":"0010029",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
        ],
        selectedXhRight: [], // Check here to configure the default column
        tableLoading: false,
        columnsRight: [
          {
            title: '序号',     //表头
            dataIndex: 'serialNumber',   //字段名称
            width: '50px',    //设列宽度
            align: 'center',  //居中显示
            fixed:true,
            className: 'changeBack',   //重置覆盖背景色为浅灰色，否则是白色的
            customRender: (value, row, index) => `${(this.paginationRight.current - 1) * this.paginationRight.pageSize + index + 1}`  //设置动态序号
          },
          {
            title: "工号",
            dataIndex: "userNo",
            align: "center",
            width: "100px",
            className: 'changeBack'
          },
          {
            title: "姓名",
            dataIndex: "userName",
            align: "center",
            width: "100px",
            className: 'changeBack'
          },
          {
            title: "卡号",
            dataIndex: "userCard",
            align: "center",
            width: "110px",
            className: 'changeBack'
          },
          {
            title: "人员类型",
            dataIndex: "userLx",
            align: "center",
            width: "100px",
            className: 'changeBack'
          },
          {
            title: "场所名称",
            dataIndex: "depName",
            align: "center",
            width: "150px",
            className: 'changeBack'
          },
          {
            title: "设备名称",
            dataIndex: "mc",
            align: "center",
            width: "180px",
            className: 'changeBack'
          },
          {
            title: "设备IP",
            dataIndex: "ip",
            align: "center",
            width: "110px",
            className: 'changeBack'
          },
          {
            title: "门名称",
            dataIndex: "doorName",
            align: "center",
            width: "200px",
            className: 'changeBack'
          },
          {
            title: "方向",
            dataIndex: "fx",
            align: "center",
            width: "80px",
            className: 'changeBack'
          },
          {
            title: "记录类型",
            dataIndex: "jlType",
            align: "center",
            width: "100px",
            className: 'changeBack'
          },
          {
            title: "进出时间",
            dataIndex: "jlSj",
            align: "center",
            width: "180px",
            className: 'changeBack'
          },
          {
            title: "设备类型",
            dataIndex: "devLb",
            align: "center",
            width: "110px",
            className: 'changeBack'
          }
        ],
        paginationRight: {
          current: 1,
          pageSize: 30, // 默认每页显示数量
          total: 0, //总条数
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ["20", "30", "50"], // 每页数量选项
          showTotal: total => `共 ${total} 条数据`, // 显示总数
          onShowSizeChange: (current, pageSize) => _this.changePage(1, pageSize), // 改变每页数量时更新显示
          onChange: (current, pageSize) => _this.changePage(current, pageSize) //点击页码事件
        },
        loading: true,
        endOpen: false
      };
    },
    mounted() {
      let _this = this;
      //加载树形结构数据
      dept.getTreeList().then(res => {
        _this.deptTree = res.data.result;
      });
      place.getTreeList().then(res => {
        _this.placeTree = res.data.result;
      });
      standardReports.findBdRecordType().then(res => {
        this.bdRecordTypeList = res.data.result;

      });
      tableBoxHeight();
      this.yHeight = tableBoxHeight();
      this.xWidth = this.columnsRight.length*120;
      // 控制表格底部边框保持在底部，而不是在半空中
      let minHeight = document.getElementsByClassName("ant-table");
      // console.log(minHeight);
      minHeight[0].style.minHeight = tableBoxHeight() + 40 + "px";

      // 计算本页面左侧高度传值给组件
      let height = window.innerHeight;
      // 减的数值具体可参考communal.js,左侧树和表格的高度
      this.heightTableLeft = String(height - 225 - 60);
      this.heightTreeLeft = "height:" + (height - 187) + "px";
    },
    methods: {
      /**
       * 右侧方法
       */
      // 分页刷新
      changePage(current, pageSize) {
        this.paginationRight.current = current;
        this.paginationRight.pageSize = pageSize;
        this.getPressDeviceQueryList();
      },
      //日期控件需要的方法
      disabledStartDate(startDate) {
        const endDate = this.endDate;
        if (!startDate || !endDate) {
          return false;
        }
        return startDate.valueOf() > endDate.valueOf();
      },
      disabledEndDate(endDate) {
        const startDate = this.startDate;
        if (!endDate || !startDate) {
          return false;
        }
        return startDate.valueOf() >= endDate.valueOf();
      },
      handleStartOpenChange(open) {
        if (!open) {
          this.endOpen = true;
        }
      },
      handleEndOpenChange(open) {
        this.endOpen = open;
      },


      serchByChecked(value){
        this.paginationRight.current = 1;
        this.placeCheckedLeft = value;
        this.placeselectedLeft = [];
        this.getPressDeviceQueryList()

      },
      serchByselected(value){
        this.paginationRight.current = 1;
        this.placeselectedLeft = value;
        this.placeCheckedLeft = [];
        this.getPressDeviceQueryList()

      },
      // 点击搜索
      handleQuery() {
        // 搜索关键字：
        this.paginationRight.current = 1;
        this.getPressDeviceQueryList();
      },
      getPressDeviceQueryList() {
        let _this = this;
        let newArry = [];
        newArry = newArry.concat( _this.placeCheckedLeft);
        newArry = newArry.concat(_this.placeselectedLeft);
        let newStartDate = _this.startDate.format("YYYY-MM-DD");
        let newEndDate = _this.endDate.format("YYYY-MM-DD");
        if (newArry.join(',') == '') {
          this.$message.warning('请勾选场所或门列表')
          return
        }
        this.tableLoading = true;
        standardReports
          .getPressDeviceQueryList({
            current: _this.paginationRight.current,
            pageSize: _this.paginationRight.pageSize,
            startDate: newStartDate,
            endDate: newEndDate,
            acdepSerial: newArry.join(","),
            devSerial: _this.stDeviceBhCheckedLeft.join(","),
            jlType: _this.jlType.join(",")
          })
          .then(res => {
            console.log(res)
            if (res.data.success) {
              _this.tableLoading = false;
              _this.selectedXhRight = [];
              _this.paginationRight.total = res.data.result.total;
              _this.listRight = res.data.result.records;
            } else {
              _this.tableLoading = false;
              _this.$message.error(res.data.message);
            }
          });
      },
      // 点击导出
      handleExport() {
        if (this.placeCheckedLeft.join(',') == '') {
          this.$message.warning('请勾选场所或门列表')
          return
        }
        this.spinning = true;
        let parameter =
          "?startDate=" +
          this.startDate +
          "&endDate=" +
          this.endDate +
          "&acdepSerial=" +
          this.placeCheckedLeft.join(",") +
          "&devSerial=" +
          this.stDeviceBhCheckedLeft.join(",") +
          "&jlType=" +
          this.jlType.join(",");
        window.open(
          api.apiUrl + "api/report/pressDeviceQueryExport" + parameter,
          "_self"
        );
        setTimeout(()=>{
          this.spinning = false;
        },1000)
      },
      // 选中授权表格
      onChangeRight(selectKeys) {
        this.selectedXhRight = selectKeys;
      },

      handleChange(value) {
        this.jlType = value;
      },
      popupScroll(v) {
        console.log(v);
      },
      // 行事件
      clickRow(record) {
        return {
          on: {
            // click: () => {
            //   // console.log("单击行: " + record)
            //   let keys = [];
            //   keys.push(record.userSerial);   //行数据一定要有唯一识别标志，否则无法选中，和表格的key一致
            //   this.selectedXhRight = keys;
            //   // console.log(this.selectedXhRight)
            // },
            dblclick: () => {
              // console.log("双击行: " + this.selectedXhRight);
              this.lookImg = cfg.apiUrl + record.photoPath;  //此处根据xh获取该人员的照片地址
              this.$refs.visibleImg.open();
            },
          }
        }
      },

    }
  };
</script>

<style>
</style>
